{% extends 'base.html' %}

{% block header %}
    <script type="text/javascript">
        $(function () {
            var totle_item = 0;
            var totle_count = 0;
            $('.col06').each(function () {
                var count = parseInt($(this).text());
                var price = parseFloat($(this).prev().text());
                totle_item = count * price;
                totle_count += totle_item;
                $(this).next().find('span').text(totle_item.toFixed(2));

            });
            $('#sum').text(totle_count.toFixed(2));
            var curry = parseFloat($('#curry').text());
            var price = curry + totle_count;
            $('#price').text(price.toFixed(2));

            $('#order_btn').click(function () {
                localStorage.setItem('order_finish', 2);

                $('.popup_con').fadeIn('fast', function () {

                    setTimeout(function () {
                        $('.popup_con').fadeOut('fast', function () {
                            //window.location.href = '/goods/index/';
                        });
                    }, 3000)

                });
            });

            $('#order_btn').click(function () {
                // 获取用户选择收货地址id, 支付方式，所有购买的商品的ids
                var address = $(':input[name="address"]:checked').val();
                var pay_type = $(':input[name="pay_style"]:checked').val();
                var cart_id_list = new Array();
                $('.goods_list_td').each(function (index) {
                    cart_id_list[index] = $(this).attr('id');
                });
                var total_pay = $('#price').text();
                var csrf = $(':input[name="csrfmiddlewaretoken"]').val();
                var send_data = {
                    'address': address,
                    'pay_type': pay_type,
                    'total_pay': total_pay,
                    'cart_id_list': cart_id_list.toString(),
                    'csrfmiddlewaretoken': csrf
                };
                $.post('/order/order_handler/', send_data, function (data) {
                    if(data.data == 1){
                        window.location.href = '/user/order_1/';
                    } else {
                        window.location.href = '/cart/cart/';
                    }
                });
            })
        })

    </script>
{% endblock header %}
{% block body %}

    <h3 class="common_title">确认收货地址</h3>

    <div class="common_list_con clearfix">
        <dl>
            {% if user.receiver != '' %}
                <dt>寄送到：</dt>
                <dd><input type="radio" name="address" checked="">
                    {{user.receiver_address}} （{{user.receiver}} 收）电话：{{user.receiver_phone}}
                </dd>
            {% else %}
                <dt>无</dt>
                <dd>请填写收货人信息！</dd>
            {% endif %}
        </dl>
        <a href="/user/site/" class="edit_site">编辑收货地址</a>

    </div>

    <h3 class="common_title">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" value="1" checked>
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style" value="2">
            <label class="weixin">微信支付</label>
            <input type="radio" name="pay_style" value="3">
            <label class="zhifubao"></label>
            <input type="radio" name="pay_style" value="4">
            <label class="bank">银行卡支付</label>
        </div>
    </div>

    <h3 class="common_title">商品列表</h3>

    <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        {% for item in carts %}
            <ul class="goods_list_td clearfix" id="{{ item.id }}">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="/static/{{ item.goods.goods_picture }}"></li>
                <li class="col03">{{ item.goods.goods_name }}</li>
                <li class="col04">{{ item.goods.goods_unity }}</li>
                <li class="col05">{{ item.goods.goods_price }}元</li>
                <li class="col06">{{ item.count }}</li>
                <li class="col07"><span></span>元</li>
            </ul>
        {% endfor %}
    </div>

    <h3 class="common_title">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_goods_count">共<em>{{ item.count }}</em>件商品，总金额<b><span id="sum"></span>元</b></div>
            <div class="transit">运费：<b id="curry">10元</b></div>
            <div class="total_pay">实付款：<b><span id="price"></span>元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        {% csrf_token %}
        <a href="javascript:;" id="order_btn">提交订单</a>
    </div>

    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>

        <div class="mask"></div>
    </div>

{% endblock body %}
</body>
</html>